<template>
  <div id="OperationReminder">
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="71px"
      >
        <el-form-item label="所属客户">
          <el-select
            v-model="formInline.customer_id"
            filterable
            placeholder="所属客户"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in customerBoxData"
              :key="index"
              :value="item.id + ''"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配送环节">
          <el-select
            v-model="formInline.node_id"
            placeholder="配送环节"
            style="padding: 0px 8px 0px 0px"
          >
            <el-option label="揽收" value="1"></el-option>
            <el-option label="干线" value="3"></el-option>
            <el-option label="配送" value="4"></el-option>
            <el-option label="签收" value="5"></el-option>
            <el-option label="回单" value="6"></el-option>
            <el-option label="回箱" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承运产品类型" label-width="100px">
          <el-select
            v-model="formInline.product_type_id"
            filterable
            placeholder="承运产品类型"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in Typecarriage"
              :key="index"
              :value="item.id + ''"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="thermometermonitorObjTwo()"
            >查询</el-button
          >
          <el-button type="primary" @click="replacement()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin: 0px 0px 10px 0px">
      <el-button type="primary" @click="newlyIncreased()">新增</el-button>
      <el-button type="primary" @click="thermomeDelete()">删除</el-button>
      <div style="float: right">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ALLtotal"
        >
        </el-pagination>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        :max-height="maxheight"
      >
        <!-- <el-table-column type="index" width="50" label="序号">
                </el-table-column> -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="customer_id" label="客户名称" width="120">
        </el-table-column>
        <el-table-column prop="node_id" label="超时节点" width="100">
          <template slot-scope="scope">
            {{ scope.row.node_id | nodeObj }}
          </template>
        </el-table-column>
        <el-table-column prop="product_type_id" label="承运类型" width="100">
        </el-table-column>
        <el-table-column prop="aging" label="时效" width="80">
        </el-table-column>
        <el-table-column prop="thermosphere" label="温层" width="160">
        </el-table-column>
        <el-table-column
          prop="collect_time"
          label="预计揽收/干线/配送时间:单位h"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="delivery_method" label="送货方式" width="100">
          <template slot-scope="scope">
            {{ scope.row.delivery_method | deliverGoods }}
          </template>
        </el-table-column>
        <el-table-column prop="payment_id" label="支付方式" width="100">
        </el-table-column>
        <el-table-column
          prop="is_receipt_customer"
          label="是否需要客户回单"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="is_receipt_ds"
          label="是否需要公司回单"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="priority_level" label="紧急度" width="120">
          <template slot-scope="scope">
            {{ scope.row.priority_level | urgency }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="attention_item" label="操作注意项" width="120">
                </el-table-column> -->
        <el-table-column prop="creator_name" label="创建人" width="120">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="150">
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, 'see')"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              @click="handleClick(scope.row, 'edit')"
              type="text"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog :title="tiletype" :visible.sync="dialogVisible" width="800px">
        <el-form
          :inline="true"
          :model="formdata"
          class="demo-form-inline"
          label-width="150px"
          ref="ruleForm"
          :disabled="detailsType"
        >
          <el-form-item label="所属客户" prop="type_id">
            <el-select
              v-model="formdata.customer_id"
              filterable
              placeholder="所属客户"
            >
              <el-option
                v-for="(item, index) in customerBoxData"
                :key="index"
                :value="item.id + ''"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="节点">
            <el-select
              v-model="formdata.node_id"
              placeholder="节点"
              style="padding: 0px 8px 0px 0px"
            >
              <el-option label="揽收" value="1"></el-option>
              <el-option label="干线" value="3"></el-option>
              <el-option label="配送" value="4"></el-option>
              <el-option label="签收" value="5"></el-option>
              <el-option label="回单" value="6"></el-option>
              <el-option label="回箱" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="承运类型">
            <el-select
              v-model="formdata.product_type_id"
              filterable
              placeholder="承运产品类型"
            >
              <el-option
                v-for="(item, index) in Typecarriage"
                :key="index"
                :value="item.id + ''"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时效">
            <el-input
              v-model="formdata.aging"
              placeholder="时效"
              style="width: 109%"
            ></el-input>
          </el-form-item>
          <el-form-item label="温层">
            <el-select v-model="formdata.thermosphere" placeholder="请选择">
              <el-option
                v-for="item in thermosphere"
                :key="item.item_code"
                :label="item.item_name"
                :value="item.item_code"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="送货方式">
            <el-select v-model="formdata.delivery_method" placeholder="请选择">
              <el-option
                id="delivery_method"
                v-for="item in delivery_method"
                :key="item.item_code"
                :label="item.item_name"
                :value="item.item_code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select v-model="formdata.payment_id" placeholder="请选择">
              <el-option
                id="pay_methods"
                v-for="item in pay_way"
                :key="item.item_code"
                :label="item.item_name"
                :value="item.item_code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="紧急度">
            <el-select v-model="formdata.priority_level" placeholder="请选择">
              <el-option
                v-for="item in order_priority_level"
                :key="item.item_code"
                :label="item.item_name"
                :value="item.item_code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否需要客户回单">
            <el-select
              v-model="formdata.is_receipt_customer"
              placeholder="节点"
            >
              <el-option label="否" value="0"></el-option>
              <el-option label="是" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否需要公司回单">
            <el-select v-model="formdata.is_receipt_ds" placeholder="节点">
              <el-option label="否" value="0"></el-option>
              <el-option label="是" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="预计揽收/干线/配送时间:单位h"
            label-width="210px"
          >
            <el-input
              v-model="formdata.collect_time"
              placeholder="时效"
              style="width: 74%"
            ></el-input> </el-form-item
          ><br />
          <el-form-item label="操作注意项" label-width="150px">
            <el-table
              ref="singleTable"
              :data="formdata.attention_items"
              highlight-current-row
              border
              width="150"
            >
              <el-table-column width="50">
                <template slot="header" slot-scope="scope">
                  <span @click="addShiper(scope)" style="font-size: 20px"
                    >+</span
                  >
                </template>
                <template slot-scope="scope">
                  <div class="remodername">
                    <div class="number">{{ scope.$index + 1 }}</div>
                    <div
                      class="remodercenter el-icon-minus"
                      @click="reduce(scope.$index)"
                    ></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="attention_item"
                label="操作注意项"
                width="200"
              >
                <template slot-scope="scope">
                  <el-form-item>
                    <el-input v-model="scope.row.attention_item"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm', 0)"
            v-if="statetype == 'add'"
            >确 定</el-button
          >
          <el-button
            type="primary"
            @click="submitForm('ruleForm', 1)"
            v-if="statetype == 'edit'"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  quality_operation_reminder_list,
  branchList,
  overtimerecordsexport,
  customerBox,
  quality_operation_reminder_create,
  quality_operation_reminder_detail,
  quality_operation_reminder_update,
  quality_operation_reminder_delete,
} from "@/api/Largewidthmeterlist";
import { getTransportsList } from "@/api/waybill";
import { dictionanryList, messageType } from "@/page/material/common/common";
export default {
  name: "TimeOutwarningList",
  data() {
    return {
      statetype: "",
      websiteList: [],
      formInline: {
        node_id: "", //节点id
        customer_id: "", //客户ID
        product_type_id: "", //承运类型id
      },
      tableData: [],
      maxheight: "auto",
      ALLtotal: 0,
      currentPage4: 1,
      page: 1,
      page_size: 20,
      customerBoxData: [], //所属客户
      Typecarriage: [], //承运类
      formdata: {
        customer_id: "", // 客户id
        node_id: "", // 节点id
        product_type_id: "", // 承运类型id
        aging: "", // 时效
        thermosphere: "", // 温层id
        collect_time: "", // 预计揽收/干线/配送时间:单位h
        delivery_method: "", // 送货方式
        payment_id: "", // 支付方式
        is_receipt_customer: "", // 是否需要客户回单
        is_receipt_ds: "", // 是否需要公司回单
        priority_level: "", // 紧急度
        attention_items: [
          {
            attention_item: "", // 操作注意项
          },
        ],
      },
      dialogVisible: false,
      thermosphere: [],
      delivery_method: [], //送货方式
      pay_way: [],
      // 紧急程度
      order_priority_level: [],
      tiletype: "客户默认提醒",
      detailsType: false,
      ids: [],
    };
  },
  mounted() {
    this.thermometermonitorObj();
    // 获取所属客户
    this.customerBoxFn();
    //  承运类型
    this.productProduct();
    // 数据
    this.pagedictionanryList();
  },
  filters: {
    nodeObj(value, params) {
      switch (value) {
        case "1":
          return "揽收";
        case "3":
          return "干线";
        case "4":
          return "配送";
        case "5":
          return "签收";
        case "6":
          return "回单";
        case "7":
          return "回箱";
      }
    },
    deliverGoods(value, params) {
      switch (value) {
        case "0":
          return "自提";
        case "1":
          return "送货";
      }
    },
    urgency(value) {
      switch (value) {
        case "0":
          return "正常";
        case "1":
          return "加急";
        case "2":
          return "特急";
      }
    },
  },
  methods: {
    async customerBoxFn() {
      let data = {
        name: "", //名称
        is_send: "1", //是否为客户 0不  1是客户
        is_receive: "", //是否收货单位  0不是  1是
      };
      var res = await customerBox(data).then((res) => {
        if (res.code === 10000) {
          this.customerBoxData = res.data;
        }
      });
    },
    async productProduct() {
      let result2 = await getTransportsList({ is_all: false });
      this.Typecarriage = result2.data.data;
    },
    thermometermonitorObjTwo() {
      this.page = 1;
      this.page_size = 20;
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    thermometermonitorObj() {
      var param = {
        ...this.formInline,
        page: this.page,
        page_size: this.page_size,
      };
      quality_operation_reminder_list(param).then((res) => {
        this.tableData = res.data.data;
        if (this.tableData.length > 6) {
          //两排操作栏
          this.maxheight = document.documentElement.clientHeight - 235;
        } else {
          this.maxheight = "auto";
        }

        this.ALLtotal = res.data.pagination.total;
        this.page = res.data.pagination.page * 1;
        this.page_size = res.data.pagination.page_size * 1;
      });
    },

    handleSizeChange(val) {
      this.page_size = val;
      this.thermometermonitorObj();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.thermometermonitorObj();
      // console.log(`当前页: ${val}`);
    },
    replacement() {
      Object.assign(this.$data.formInline, this.$options.data().formInline);
      this.page = 1;
      this.page_size = 20;
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    newlyIncreased() {
      Object.assign(this.$data.formdata, this.$options.data().formdata);
      this.dialogVisible = true;
      this.tiletype = "客户默认提醒创建";
      this.statetype = "add";
      this.detailsType = false;
    },
    pagedictionanryList() {
      var param = [
        "thermosphere",
        "delivery_method",
        "pay_way",
        "order_priority_level",
      ];
      dictionanryList(param).then((res) => {
        var res = res.data.list;
        var payList = [];
        res.pay_way.forEach((element) => {
          if (element.item_code != "0") {
            payList.push(element);
          }
        });
        this.thermosphere = res.thermosphere;
        this.delivery_method = res.delivery_method;
        this.pay_way = payList;
        this.order_priority_level = res.order_priority_level;
      });
    },
    submitForm(formName, type) {
      if (type == 0) {
        var param = {
          ...this.formdata,
        };
        quality_operation_reminder_create(param).then((res) => {
          if (res.code == 10000) {
            messageType("客户默认提醒创建成功", "success");
            this.thermometermonitorObj();
            this.dialogVisible = false;
          }
        });
      } else if (type == 1) {
        var param = {
          ...this.formdata,
        };
        quality_operation_reminder_update(param).then((res) => {
          if (res.code == 10000) {
            messageType("客户默认提醒编辑成功", "success");
            this.thermometermonitorObj();
            this.dialogVisible = false;
          }
        });
      }
    },
    handleClick(row, type) {
      this.dialogVisible = true;
      if (type == "see") {
        this.tiletype = "客户默认提醒详情";
        this.statetype = "see";
        this.detailsType = true;
      } else if (type == "edit") {
        this.tiletype = "客户默认提醒编辑";
        this.statetype = "edit";
        this.detailsType = false;
      }
      var param = {
        id: row.id,
      };
      quality_operation_reminder_detail(param).then((res) => {
        if (res.code == 10000) {
          this.formdata = { ...res.data };
        }
      });
    },
    thermomeDelete() {
      var param = {
        ids: this.ids,
      };
      quality_operation_reminder_delete(param).then((res) => {
        if (res.code == 10000) {
          messageType("客户默认提醒删除成功", "success");
          this.thermometermonitorObj();
        }
      });
    },
    handleSelectionChange(val) {
      // console.log(val, "multipleSelection");
      this.ids = val.map((item) => item.id);
      // this.ids =
      // this.multipleSelection = val;
    },
    // 货物数量函数
    addShiper(scope) {
      this.formdata.attention_items.push({
        attention_item: "", // 操作注意项
      });
    },
    reduce(index) {
      // 通过索引删除InForMationList数组中的元素
      // 因为如果不保留唯一一条数据的话再次渲染dom的时候是无法获取数据的
      if (this.formdata.attention_items.length > 1) {
        this.formdata.attention_items.splice(index, 1);
      } else {
        this.$message({
          message: "这是最后一条数据",
          type: "warning",
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
#OperationReminder {
  /* width: 100%; */
  background: #ffffff;
  padding: 10px 15px;
  .remodername .number {
    height: 20px;
    display: block;
  }

  .remodername:hover .number {
    display: none;
  }

  .remodername .remodercenter {
    display: none;
    color: #161414;
  }

  .remodername:hover .remodercenter {
    height: 20px;
    display: block;
    color: #262424;
  }
}
</style>